<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮菜单</title>
<style type="text/css">
a.ovalbutton{
background: transparent url('http://www.codefans.net/jscss/demoimg/200905/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma;
line-height: 16px; 
height: 24px;
padding-left: 11px; 
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; }
a.ovalbutton span{
background: transparent url('http://www.codefans.net/jscss/demoimg/200905/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; 
}

a.ovalbutton:hover{
background-position: bottom left;
}

a.ovalbutton:hover span{ 
background-position: bottom right;
color: black;
}

.buttonwrapper{
overflow: hidden; 
width: 100%;
}

</style>
</head>
<body>
<h4>Single button:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="/jscss/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>
<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="/" style="margin-left: 6px"><span>Welcome</span></a>
</div>
</body>
</html>